<template>
    <view class="index-container">
        <!-- 搜索组件-->
        <mySearch></mySearch>

        <!-- 轮播图-->
        <swiper class="banner">
            <swiper-item v-for="item in banner" :key="item.id">
                <!-- 通过navigator实现图片跳转到详情页-->
                <navigator url="/pkgGood/detail/detail?id=item.goods_id">
                    <image class="img" mode="widthFix" :src="item.image_url"></image>
                </navigator>
            </swiper-item>
        </swiper>

        <!-- 通知组件 -->
        <u-notice-bar text="测试文字"></u-notice-bar>

        <!-- 菜单区域-->
        <u-grid :border="false" col="5">
            <u-grid-item @click="goCate(item.id)" v-for="item in channel" :key="item.id">
                <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
                <text class="menuText">{{item.name}}</text>
            </u-grid-item>
        </u-grid>

        <!-- 商品分类-->
        <view class="goodContainer" v-for="item in categoryList" :key="item.id">
            <view class="titleBox" @click="goCate(item.id)">
                <text>{{item.name}}</text>
            </view>
            <!-- 商品列表-------使用封装的组件 -->
            <goodList :list="item.goodsList"></goodList>
        </view>

    </view>
</template>
<script>
    import setBadge from '@/mixins/setBadge.js'
    export default {
        mixins: [setBadge],
        name: 'Index',
        data() {
            return {
                //1.定义数据
                banner: [], //轮播图的数据
                channel: [], //菜单栏的数据
                notice: [], //通知的数据
                categoryList: [] //分类的数据
            }
        },
        onLoad() {
            //发送请求首页数据
            this.getindexData()
        },
        methods: {
            //1.获取首页数据
            async getindexData() {
                const res = await uni.$http.get('/index/appInfo')
                // console.log(res);
                this.banner = res.banner
                this.channel = res.channel
                this.categoryList = res.categoryList
                // this.notice = res.notice
            },
            //2.点击菜单区去分类界面
            goCate(cateId) {
                // console.log(cateId);
                //将对应的分类id存在本地
                uni.setStorageSync('cateId', cateId)
                //去分类页面
                uni.switchTab({
                    url: "/pages/cate/cate"
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    /* 轮播*/
    .banner {
        .img {
            width: 100%;
        }
    }

    /* 菜单区*/
    .menuImg {
        width: 80rpx;
    }

    .menuText {
        color: #888;
    }

    /* 商品分类标题*/
    .titleBox {
        margin: 10rpx 0;
        background-color: #fafafa;
        padding: 20rpx 0;
        box-sizing: border-box;
        text-align: center;

        text {
            display: inline-block;
            border-bottom: 4rpx solid #409eff;
            color: #333;
            font-size: 28rpx;
        }
    }

    .goodContainer {
        padding: 0 20rpx;
    }
</style>
